<!DOCTYPE HTML>
<html>
<head>
    <title>订单列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <form id="form2" method="post" enctype="multipart/form-data">
                <h4>订单详情
                </h4>
            </form>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <div class="jx-search-container">
                    <form id="searchForm" class="jx-form form-horizontal jx-form-thin">
                        <input type="hidden" name="orderStatus" id="orderStatus">
                        <div class="row ">
                            <div class="control-group span7">
                                <label class="control-label first">订单号:</label>
                                <div class="controls">
                                    <input name="orderCode" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">供应商:</label>
                                <div class="controls">
                                    <input name="supplierName" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">物流单号:</label>
                                <div class="controls">
                                    <input name="expressNumber" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span2 pull-right">

                                <button type="submit" class="jx-btn btn-default">搜索</button>

                            </div>
                        </div>
                        <div class="row">
                            <div class="control-group span7">
                                <label class="control-label"> 订单备注:</label>
                                <div class="controls">
                                    <input name="orderRemark" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">收货人:</label>
                                <div class="controls">
                                    <input name="userName" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">买家帐号:</label>
                                <div class="controls">
                                    <input name="userPhone" type="text" class="control-text">
                                </div>
                            </div>
                        </div>
                        <div class="row">

                            <div class="control-group span7">
                                <label class="control-label">出货仓库:</label>
                                <div class="controls">
                                    <input name="supplierWarehouse" type="text" class="control-text">
                                </div>
                            </div>

                            <div class="control-group span7">
                                <label class="control-label">订单类型:</label>
                                <div class="controls">
                                    <select class="normal-control" name="orderType">
                                        <option value="">全部</option>
                                        <option value="1">采购</option>
                                        <option value="2">分销</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group span10">
                                <label class="control-label">下单时间:</label>
                                <div class="controls">
                                    <input type="text" name="beginOrderDate"
                                           class="calendar calendar-time input-medium"><span> - </span>
                                    <input type="text" name="endOrderDate"
                                           class="calendar calendar-time input-medium"><span> </span>
                                </div>
                            </div>
                        </div>
                    </form>
                    <form id="form1" method="post" enctype="multipart/form-data">
                        <div class="row">

                            <div class="controls" align="left">

                            </div>
                            <div class="controls" align="left">

                            </div>

                        </div>
                    </form>
                </div>
                <div id="tab"></div>
                <div id="panel" class="">
                    <div>
                        <div id="grid"></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script>
    BUI.use(['bui/grid', 'bui/data', 'bui/calendar', 'bui/tab', 'common/search'], function (Grid, Data, Calendar, Tab, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '序号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 50
            }, {
                title: '订单号',
                elCls: 'center',
                dataIndex: 'b',
                width: 150
            }, {
                title: '订单类型',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '自定义订单号',
                elCls: 'center',
                dataIndex: 'd',
                width: 150
            }, {
                title: '供应商',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '发货仓简称',
                dataIndex: 'f',
                elCls: 'center',
                width: 100
            }, {
                title: '订单状态',
                dataIndex: 'g',
                elCls: 'center',
                width: 100
            }, {
                title: '下单时间',
                dataIndex: 'h',
                elCls: 'center',
                width: 100
            }, {
                title: '支付时间',
                dataIndex: 'i',
                elCls: 'center',
                width: 100
            }, {
                title: '订单状态',
                dataIndex: 'j',
                elCls: 'center',
                width: 100
            }, {
                title: '会员ID',
                dataIndex: 'k',
                elCls: 'center',
                width: 100
            }, {
                title: '会员帐号',
                dataIndex: 'l',
                elCls: 'center',
                width: 100
            }, {
                title: '收货人',
                dataIndex: 'm',
                elCls: 'center',
                width: 100
            }, {
                title: '收货地址',
                dataIndex: 'n',
                elCls: 'center',
                width: 400
            }, {
                title: '收货人电话',
                dataIndex: 'o',
                elCls: 'center',
                width: 100
            }, {
                title: '收货人手机',
                dataIndex: 'p',
                elCls: 'center',
                width: 100
            }, {
                title: '收货邮编',
                dataIndex: 'q',
                elCls: 'center',
                width: 100
            }, {
                title: '商品总额',
                dataIndex: 'r',
                elCls: 'center',
                width: 100
            }, {
                title: '人工减免',
                dataIndex: 's',
                elCls: 'center',
                width: 100
            }, {
                title: '运费',
                dataIndex: 't',
                elCls: 'center',
                width: 100
            }, {
                title: '应付金额',
                dataIndex: 'u',
                elCls: 'center',
                width: 100
            }, {
                title: '支付方式',
                dataIndex: 'v',
                elCls: 'center',
                width: 100
            }, {
                title: '下单渠道',
                dataIndex: 'w',
                elCls: 'center',
                width: 100
            }, {
                title: '订单备注',
                dataIndex: 'z',
                elCls: 'center',
                width: 100
            }, {
                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '编辑供应商',
                        text: '[ 详情 ] ',
                        href: 'templates/order/order-list/order-detail.html'
                    });
                    return editStr;
                }
            }],
            data = [{
                a: '111',
                b: '14761790530947100',
                c: '采购',
                d: '2133063307544980',
                e: '激想',
                f: '上海一仓',
                g: '待支付',
                h: '2016/8/3 11:31',
                i: '2016/8/2 0:31',
                j: '待发货',
                k: 'JX368638713',
                l: '15900684377',
                m: '陈晨',
                n: '上海 上海市 浦东新区 金桥经济技术开发区 金藏路351号33弄201室',
                o: '021-64541067]',
                p: '15900684377',
                q: '200231',
                r: '589.00',
                s: '89.00',
                t: '10.00',
                u: '510.00',
                v: '转账支付',
                w: '',
            }, {
                a: '111',
                b: '14761790530947100',
                c: '采购',
                d: '2133063307544980',
                e: '激想',
                f: '上海一仓',
                g: '待支付',
                h: '2016/8/3 11:31',
                i: '2016/8/2 0:31',
                j: '待发货',
                k: 'JX368638713',
                l: '15900684377',
                m: '陈晨',
                n: '上海 上海市 浦东新区 金桥经济技术开发区 金藏路351号33弄201室',
                o: '021-64541067]',
                p: '15900684377',
                q: '200231',
                r: '589.00',
                s: '89.00',
                t: '10.00',
                u: '510.00',
                v: '转账支付',
                w: '触摸屏',
                z: ''
            }];
        var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
        });
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            }),
            tab = new Tab.TabPanel({
                render: '#tab',
                elCls: 'nav-tabs',
                panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
//                 selectedEvent : 'mouseenter',//默认为click,可以更改事件
                autoRender: true,
                children: [{
                    id: '0',
                    title: '待发货(0)',
                    value: '2',
                }, {
                    id: '1',
                    title: '待支付(0)',
                    value: '1',
                }, {
                    id: '2',
                    title: '已发货(24)',
                    value: '3',
                }, {
                    id: '3',
                    title: '已完成(3)',
                    value: '4',
                }, {
                    id: '4',
                    title: '已撤销(323)',
                    value: '5',
                }, {
                    id: '5',
                    title: '全部(350)',
                    value: '00',
                }]
            });
        var index = 0;
        tab.on('selectedchange', function (ev) {
            var item = ev.item;
        });

        tab.setSelected(tab.getItemAt(0));

        grid.render();
    });
</script>
<!-- script end -->

</body>
</html>
